<template>
    <div>
        <a-modal
            :title="isView?'查看工作经历':(fromState.id?'编辑工作经历':'添加工作经历')"
            :visible="visible"
            @ok="handleOk"
            @cancel="visible = false"
            class="work-experience-model"
            :width="500"
        >
            <a-form layout="horizontal" :form="form" v-if="visible">
                <a-form-item label="开始时间" >
                    <a-date-picker
                    v-if="!isView"
                    placeholder="请输入开始时间" 
                    format="YYYY-MM"
                    v-model:value="fromState.fgzkssj"
                    v-decorator="['fgzkssj', { initialValue:fromState.fgzkssj, rules: rules.fgzkssj}]"
                    />
                    <span v-else>{{ moment(fromState.fgzkssj).format('YYYY-MM') }}</span>
                </a-form-item>
                <a-form-item label="结束时间">
                    <div :key="fgzjssjKey">
                        <div v-if="!isView">
                            <span v-if="fromState.fgzjssj && fromState.fgzjssj.zjtext">至今</span>
                            <a-date-picker v-else placeholder="请选择结束时间" v-model="fromState.fgzjssj"/>
                            <a-button style="margin: 0 10px;" class="blue-btn" type="primary" v-if="fromState.fgzjssj && fromState.fgzjssj.zjtext" @click="fromState.fgzjssj = moment();fgzjssjKey = Date.now()">时间</a-button>
                            <a-button style="margin: 0 10px;" class="blue-btn" type="primary" v-else @click="fromState.fgzjssj = {zjtext:'至今'};fgzjssjKey = Date.now()">至今</a-button>
                        </div>
                        <span v-else>{{ fromState.fgzjssj && fromState.fgzjssj.zjtext?'至今':moment(fromState.fgzjssj).format('YYYY-MM') }}</span>
                    </div>
                    <!-- <a-date-picker
                    v-if="!isView"
                    placeholder="请输入结束时间" 
                    format="YYYY-MM-DD"
                    v-model:value="fromState.fgzjssj"
                    v-decorator="['fgzjssj', { initialValue:fromState.fgzjssj, rules: rules.fgzjssj}]"
                    />
                    <span v-else>{{ moment(fromState.fgzjssj).format('YYYY-MM-DD') }}</span> -->
                </a-form-item>
                <a-form-item label="工作单位">
                    <a-input
                    v-if="!isView"
                     placeholder="请输入工作单位" 
                     v-model:value="fromState.fgzdw"
                     v-decorator="['fgzdw', { initialValue:fromState.fgzdw, rules: rules.fgzdw}]"
                    />
                    <span v-else>{{ fromState.fgzdw }}</span>
                </a-form-item>
                <a-form-item label="工作岗位">
                    <a-input
                    v-if="!isView"
                     placeholder="请输入工作岗位" 
                     v-model:value="fromState.fcsgz"
                    />
                    <span v-else>{{ fromState.fcsgz }}</span>
                </a-form-item>
                <a-form-item label="职务">
                    <a-input
                    v-if="!isView"
                     placeholder="请输入职务" 
                     v-model:value="fromState.fzw"
                    />
                    <span v-else>{{ fromState.fzw }}</span>
                </a-form-item>
            </a-form>
            <template slot="footer">
                <div>
                    <a-button @click="visible = false" >{{isView?'关闭':'取消'}}</a-button>
                    <a-button v-if="!isView" class="blue-btn" style="margin-left: 15px;" @click="handleOk(true)" type="primary">保存</a-button>
                    <a-button v-if="!isView" class="blue-btn" style="margin-left: 15px;" @click="handleOk(false)" type="primary">保存并关闭</a-button>
                </div>
            </template>
        </a-modal>
    </div>
</template>
<script>
import {
    sysUserGzjladdGzjl,
    sysUserGzjleditGzjl,
    sysUserGzjlqueryById,
} from './service/index'
import moment from 'moment'
import compSelector from '@/components/compSelector/compSelector.vue'
import blobType from '@/common/blobType'
export default {
    components:{
        compSelector,
    },
    props:{

    },
    data(){
        return{
            moment:moment,
            isView:false,
            visible:false,
            form:this.$form.createForm(this, { name: 'trainingRecordsFrom' }),
            fromState:{},
            compSelectorkey:null,
            rules:{
                fgzkssj: [{
                    type:'object',
                    required: true,
                    message: '请输入开始时间',
                }],
                fgzjssj: [{
                    type:'object',
                    required: true,
                    message: '请输入结束时间',
                }],
                fgzdw: [{
                    required: true,
                    message: '请输入工作单位',
                }],
                
            },
            fileList:[],
            fgzjssjKey:null,
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(val,isView){
            this.isView = isView
            if(val.id){
                sysUserGzjlqueryById({id:val.id}).then(res=>{
                    if(res.code ==  200){
                        res.result.fgzkssj = res.result.fgzkssj?moment(res.result.fgzkssj):''
                        res.result.fgzjssj = res.result.fgzjssj == '至今'?{zjtext:'至今'}:(res.result.fgzjssj?moment(res.result.fgzjssj):moment())
                        this.fromState = res.result
                        
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }else{
                this.fromState = {}
            }
        },
        handleOk(val){
            this.form.validateFields((err, values) => {
                if(!err){
                    let data = {
                        ...this.fromState,
                        fgzkssj:this.fromState.fgzkssj?moment(this.fromState.fgzkssj).format('YYYY-MM'):'',
                        fgzjssj:this.fromState.fgzjssj.zjtext?'至今':moment(this.fromState.fgzjssj).format('YYYY-MM'),
                    }
                    if(this.fromState.id){
                        sysUserGzjleditGzjl(data).then(res=>{
                            if(res.code == 200){
                                this.getData({id:this.fromState.id})
                                this.visible = val
                                this.$emit('sussecWorkExperience')
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }else{
                        sysUserGzjladdGzjl(data).then(res=>{
                            if(res.code == 200){
                                this.visible = val
                                this.getData({id:res.result.id})
                                this.$emit('sussecWorkExperience')
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }
                }
            })
            
        },
    }
}
</script>
<style lang="less">
.work-experience-model{
    .ant-form-item{
        display: flex;
        margin-bottom: 0;
    }
    .ant-form-item-control-wrapper{
        flex: 1;
    }
    .ant-form-item-label{
        margin-right: 5px;
        label{
            width: 100px;
            color: rgba(0, 0, 0, 0.85);
            background-color:#e6f7ff;
            font-size: 16px;
            font-weight: 600;
            display: inline-block;
            height: 32px;
            line-height: 32px;
        }
        
    }
}
</style>